1<template>
  <div>
    <!-- 短信验证码 -->
    <van-dialog
      v-model="show"
      title="短信验证码"
      show-cancel-button
      @confirm="confirm"
    >
      <div class="verificationCode-center">
        <p>验证码</p>
        <input type="text" placeholder="4位短信验证码" id="Y1six" v-model="yzm"/>
        <div @click="startTimer" id="Y1gain" v-if="codeShow">获取验证码</div>
        <!-- 倒计时 -->
        <span v-if="!codeShow" class="count">{{ count }}秒后重试</span>
      </div>
      <div class="verificationCode-top">
        <div id="Y1phone">
          验证码发送至手机号<span id="num1">{{ num }}</span>
        </div>
      </div>
    </van-dialog>
    <div class="Y1main">
      <div class="Y1nav">
        <router-link to="Longin"><img src="../assets/img/返回箭头.png" alt="" /></router-link>
        <span>登录</span>
      </div>
      <div class="Y1number">
        <div class="Y1headd"></div>
        <p id="num">{{ num }}</p>
      </div>
      <div class="Y1put">
        <input
          type="password"
          placeholder="请输入登录密码"
          id="Y1password"
          v-model="mima"
        />
         <div class="Y1input1" @click="forget">忘记密码？</div>
        <button @click="fun">登录</button>
      </div>
      <div class="Y1option">
        <a href="">切换/登录用户</a>
        <a href="">登录帮助</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { yphone, auth, auth1 } from "../api/Enroll";
export default {
  data() {
    return {
      show: false,
      codeShow: true,
      count: "",
      timer: null,
      num: localStorage.getItem('iphone'),
      mima: "",
      yzm:""
    };
  },
  methods: {
    // 弹框
    fun() {
      if (Y1password.value == "") {
        Dialog({ title: "温馨提示", message: "密码不能为空，请重新输入" });
      } else {
        yphone({ password: this.mima })
          .then((res) => {
            this.show = true;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      localStorage.setItem("iphone",this.num)
    },
    // 验证码
    startTimer() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      let code = {
        mobile: this.mobile,
        sms_type: "login",
      };
      // 接口 验证码发送请求
      auth({ phone: this.num }).then((res) => {});
    },
    // 接口
    // 验证码
    confirm() {
      auth1({code:this.yzm,phone:this.num,type:"1"}).then((res)=>{
        if (res.code==200) {
        //   this.$router.push({
        //   name:"homepage"
        // })
        location.href="http://124.221.98.163:8000/checkface.html";
        }else{
          Dialog({ title: "温馨提示", message: "密码错误，请重新输入" });
        }
      }).catch((err)=>{
          console.log(err);
        })
   
    },
    // 忘记密码
    forget(){
      this.$router.push({
        name:"ResetLogin",
        params:{
          phone:this.num
        }
      })
    }
  },
};
</script>

<style scoped src="../assets/css/login.css">
</style>